<template>
  <el-tree
    :data="fileList"
    node-key="id"
    ref="tree"
    highlight-current
    :props="defaultProps"
    :class="className"
    :show-checkbox="showCheckBox"
    :default-expand-all="expandAll"
    :expand-on-click-node="expandOnClickNode"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span class="fileIconBox" >
        <!-- <i class="el-icon-folder" v-if="data.isDir"></i> -->
        <i
          ><img
            src="@/assets/images/fileIcon.svg"
            v-if="data.isDir"
            style="width: 13px"
        /></i>
        <i
          ><img
            src="@/assets/images/zipIcon.svg"
            v-if="
              handleCheckType(data.type, ['zip', 'ZIP', 'rar', 'RAR'])
            "
            style="width: 13px"
        /></i>
        <i
          class="el-icon-picture-outline"
          v-if="handleCheckType(data.type, ['png'])"
        ></i>
        <i
          class="el-icon-document"
          v-if="handleCheckType(data.type, ['docx','xlsx','pdf','html','css','pptx','js','DOCX','XLSX','PDF','CSS','HTML','PPTX','JS',])"
        ></i>
        <i
          class="el-icon-video-play"
          v-if="handleCheckType(data.type, ['wav','mp4','mp3','m3u8','WAV','MP4','MP3','M3U8',])"
        ></i>
      </span>
      <div class="studies" v-if="showMoreBtn">
        <span class="name" 
        @click="handleClickNode($event, node, data)"
        :title="data.fileName">{{ data.fileName }}</span>
        <span class="size" v-if="!unShowUploadBtn && !unShowMroeInfo"></span>
        <span class="updateTime" v-if="!unShowUploadBtn && !unShowMroeInfo">{{ data.lastUpdateTime }}</span>
        <BtnList  :node="node" :data="data" :isStuShow="isStuShow" :baseFileUrl="baseFileUrl" @append="append(node, data)" @remove="remove(node, data)"  @decompression="handleDecompression(node, data)"
          @fileDataUploaded="fileDataUploaded(node,data,$event)" @handleSetHomePage="handleSetHomePage(node, data)" @handleCopy="handleCopy(node, data)" @downLoad="handleDownLoad(node, data)" 
          :unShowUploadBtn="unShowUploadBtn" @select="select(node, data)" :unShowMroeInfo="unShowMroeInfo" :disabled="disabled" :unShowGroupIcon="unShowGroupIcon" :unShowDeleteBtn="unShowDeleteBtn"
          :fileList="fileList" :showCopyBtn="showCopyBtn" :currNo="currNo" @handleNewDownLoad="handleNewDownLoad(node, data)" :isArchive="isArchive"
        />
      </div>
      <!-- <span
        v-if="!showMoreBtn"
        class="fileName"
        @click="handleClickNode($event, node, data)"
        >{{ data.fileName }}
        <div
          class="deleteFile"
          @click.stop="handelDeleteFile(data, index)"
          v-if="
            titemState !== chooseType[2] &&
            !unShowGroupIcon &&
            node.level == 1
          "
        />
      </span> -->
    </span>
  </el-tree>
</template>

<script>
const BtnList = () => import("@/components/treeFile/component/btnList.vue")
export default {
  components: {
    BtnList,
  },
  data() {
    return {}
  },
  props: {
    showMoreBtn:Boolean,
    fileList: Array,
    defaultProps: {
      type: Object,
      default:() => {
        return {
          children: "subFiles",
          label: "fileName",
        }
      }
    },
    unShowGroupIcon: Boolean,
    titemState: Object,
    chooseType: Array,
    // pageName: String,
    className: String,
    expandAll: Boolean,
    showCheckBox: {
      type: Boolean,
      debugger: () => false
    },
    nodeKey: {
      type: String,
      default: () => ''
    },
    expandOnClickNode: {
      type: Boolean,
      default: () => true
    },
    baseFileUrl: String,
    text: String,
    isStuShow: Boolean,
    unShowUploadBtn: Boolean,
    unDecompression: Boolean,
    unShowMroeInfo: Boolean, // 不展示更改信息
    unShowDeleteBtn: Boolean,
    disabled: Boolean,
    showCopyBtn: Boolean, //单独显示复制按钮
    currNo: Number,
    isArchive: Boolean, // 是否归档类型
  },
  computed: {
    handleCheckType() {
      return (type, arrType) => {
        return arrType.indexOf(type) !== -1;
      };
    },
  },
  methods: {
    // 点击节点
    handleClickNode(e, node, data) {
      this.$emit('handleClickNode',e,node,data)
    },
    // handelDeleteFile(choseItem, choseIndex) {
    //   this.$emit('handelDeleteFile', choseItem, choseIndex)
    // },
    append(node, data) {
      this.$emit("append",node, data, this.text)
    },
    remove(node, data) {
      this.$emit("remove",node, data)
    },
    // 文件上传成功后 将文件传递到父组件
    fileDataUploaded(node,data,fileData) {
      this.$emit("fileDataUploaded", node, data, fileData)
    },
    handleCopy(node,data) {
      this.$emit("copy",node, data)
    },
    handleSetHomePage(node, data) {
      this.$emit("handleSetHomePage", node, data)
    },
    handleDecompression(node, data) {
      this.$emit("decompression", node, data)
    },
    handleDownLoad(node, data) {
      this.$emit("downLoad", node, data)
    },
    select(node, data) {
      this.$emit("select", node, data)
    },
    handleNewDownLoad(node, data) {
      this.$emit("newDownLoad", node, data)
    },
  }
}
</script>

<style lang="stylus">
.custom-tree-node {
  height: 100%;
  overflow: hidden;
  .fileIconBox {
    padding: 0 3px;
  }

  .fileName {
    position: relative;

    .deleteFile {
      position: absolute;
      right: -15px;
      top: 0;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: rgba(150, 150, 150, 0.32);
      transform: translate(0, 3px);
    }

    .deleteFile::before, .deleteFile::after {
      position: absolute;
      content: ' ';
      background: rgba(255, 255, 255, 0.17);
      left: 0;
      top: 0;
      width: 1px;
      height: 7px;
    }

    .deleteFile::before {
      transform: rotate(45deg) translate(5px, -2px);
    }

    .deleteFile::after {
      transform: rotate(-45deg) translate(2px, 5px);
    }

    

    .deleteFile:hover {
      background: #f23e3e;
    }

    .deleteFile:hover::before, .deleteFile:hover::after {
      background: #ffffff;
    }
  }
}


.el-tree-node__content {
  height: 26px;
  line-height: 26px;

  .fileName {
    position: relative;
    padding: 3px 0;
    font-family: PMingLiU-ExtB;
    font-size: 14px;
    color: #629cd4;

    .deleteFile {
      position: absolute;
      right: -15px;
      top: 4px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: rgba(150, 150, 150, 0.32);
      transition: all .1s linear;
    }

    .deleteFile::before, .deleteFile::after {
      position: absolute;
      content: ' ';
      background: rgba(255, 255, 255, 1);
      left: 5px;
      top: 1.5px;
      width: 1px;
      height: 7px;
    }

    .deleteFile::before {
      transform: rotate(45deg);
    }

    .deleteFile::after {
      transform: rotate(-45deg);
    }

    .deleteFile:hover {
      background: #f23e3e;
    }

    .deleteFile:hover::before, .deleteFile:hover::after {
      background: #ffffff;
    }

    .decompression {
      margin-left: 10px;
      color: #000;
    }

    .decompression:hover {
      color: #629cd4;
    }
  }

}

.filePageTree {
  font-family: Source Han Sans CN;
  font-size: 1rem;
  color: #6f6f6f;

  .el-tree-node__expand-icon, .el-icon-caret-right {
    display: none !important !important;
  }

  .custom-tree-node {
    display: flex;
    width: 100%;
  }

  .is-leaf {
    display: none;
  }

  .studies {
    display: flex;
    width: 100%;
    padding-right: 10px;

    .name {
      text-align: left;
      display: inline-block;
      width: 252px;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;

      .addFilePage {
        cursor: pointer;
      }
    }

    .size {
      display: inline-block;
      width: 108px;
      vertical-align: middle;
    }

    .updateTime {
      display: inline-block;
      width: 150px;
      vertical-align: middle;
    }

    .operation {
      width: 100%;
      flex: 1;
      text-align: right;
      line-height: 1
      display: flex;
      line-height: 1;
      align-items: center;
      justify-content: flex-end;
      
      .custom-upload {
        display: inline-block
        line-height: 1
        button {
          display: inline-block
          line-height: 1
          overflow hidden
        }
      }
    }

  }
}
</style>